<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Describe the application here." />
<meta name="keywords" content="geowiki,yui,tinymce,great loop" />
<meta name="copyright" content="Richard J Bell" />
<meta name="robots" content="index,follow" />

<title>Geo Wiki</title>

<style type="text/css">
    /* margin and padding on body element
        can introduce errors in determining
        element position and are not recommended;
        we turn them off as a foundation for YUI
        CSS treatments. */
    body {
        margin:0;
        padding:0;
    }
</style>

<!-- YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/resize.css">
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.6.0/build/logger/assets/skins/sam/logger.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/menu/assets/skins/sam/menu.css">

<!-- YUI JS files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>

<!-- Google maps -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAB1HE6c8mtUP2cfxsSezyExTLg_i57PFZfojJFM1YCHtnknrpaxQ3Npzhv2-Mx3iB7iHQIuBmtt7Wiw"></script>

<!-- YUI JS files (non min for debug) -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo.js"></script> -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dom/dom.js"></script> -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event.js"></script> -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta.js"></script> -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script> -->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/resize/resize.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/logger/logger-min.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/menu/menu.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button.js"></script>-->
<!--<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection.js"></script>-->


<style type="text/css">
    .yui-skin-sam .yui-panel .hd {
        background: lightblue;
    }
    .yui-skin-sam .yui-panel-container.focused .yui-panel .hd {
        background: aqua;
    }
    .yui-skin-sam .yui-panel .ft {
        color:#000000;
        font-size:93%;
        font-weight:bold;
    }
    .bd {
        overflow: auto;
    }
    /*
    The following CSS is added to prevent scrollbar bleedthrough on
    Gecko browsers (e.g. Firefox) on MacOS.

    PLEASE NOTE: It is necessary to toggle the "overflow" property 
    of the body element between "hidden" and "auto" in order to 
    prevent the scrollbars from remaining visible after the the 
    Resizable Panel is hidden.  For more information on this issue, 
    read the comments in the "container-core.css" file.

    We use the #panel1_c id based specifier, so that the rule
    is specific enough to over-ride the .bd overflow rule above.
    */
    Panel-scrollbars .yui-resize .bd { overflow: hidden; }
    #Menu_c.show-scrollbars .yui-resize .bd { overflow: auto; }
    #Menu_c.show-scrollbars .underlay { overflow: visible; }
    /*
    Style our log messages
    */
    .yui-log .todo {background-color: yellow;}
    .yui-log .dbg {background-color: red;}
    /*
    Replace panel hide icon with a more appropriate version
    http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/sprite.png contains multiple sprites for YUI 
    */
    .yui-skin-sam .container-close {
        background: transparent url(http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/sprite.png) no-repeat -5px -450px;
        width: 15px;
        height:15px;
        cursor:pointer;
        position:absolute;
        right:6px;
        top:5px;
        overflow:hidden;
        text-decoration:none;
        text-indent:-10000em;
    }
    /* make the resize handles a bit more prominent */
    .yui-skin-sam .yui-resize .yui-resize-handle-tr {
        background-color: blue;
        width: 5px;
        height: 5px;
    }
    .yui-skin-sam .yui-resize .yui-resize-handle-br {
        background-color: blue;
        width: 5px;
        height: 5px;
    }
    /*
    experiments
    */
    .yg-collapse {
        background: transparent url(http://yui.yahooapis.com/2.6.0/build/assets/skins/sam/sprite.png) no-repeat 0px -400px;
        width: 15px;
        height:15px;
        cursor:pointer;
        position:absolute;
        right:26px;
        top:5px;
        overflow:hidden;
        text-decoration:none;
        text-indent:-10000em;
    }
    /*
    button styles
    */
    .yg-small-button {
        font-size: 77%;
    }
    /*
    Setup our menu panel
    */
    #Menu_h {
        background: magenta;
    }
    /*
    General text format
    */
    p {
        font-size: 1em;
    }
</style>
<!--Namespace-->
<script type="text/javascript" >
    ////////////////////////////////////////////////////////////////////////////
    //
    // creat our namespace and initialize 
    //
    ////////////////////////////////////////////////////////////////////////////
    YAHOO.namespace("geowiki");
    var YG = YAHOO.geowiki;

</script>
<!--Dynamic panels-->
<script type="text/javascript" >
    ////////////////////////////////////////////////////////////////////////////
    //
    // Panel globals
    //
    ////////////////////////////////////////////////////////////////////////////
    /**
        * Default panel configuration.  See YAHOO.widget.Panel config.
        *
        * @property panelConfig
        * @type Object
        */
    YG.panelConfig = { 
        x: 120,
        y: 120,
        width: '200px',
        height: '200px',
        visible: true,
        close: true
    };
    /**
        * Panel index.  Used to serialize panel names.
        *
        * @property _index
        * @static
        * @type Number
        * @default 0
        * @private
        */
    YG.panelIndex = 0;
    /**
        * Overlay manager for panels.
        *
        * doc:
        */
    YG.overlayManager = new YAHOO.widget.OverlayManager();
    ////////////////////////////////////////////////////////////////////////////
    //
    // Panel implements dynamically created resizable panels
    //
    ////////////////////////////////////////////////////////////////////////////
    /**
        * Create a dynamic panel with the standard config.
        *
        * doc:
        */
    YG.Panel = function( name, config ){
        // if there is no name or it is '' create one
        if( !name || name == ''){
            name = 'gwp-'+YG.panelIndex++;
        }
        // create the panel
        var tmpPanel = new YAHOO.widget.Panel( name, YG.panelConfig );
        // merge the config with the default config
        if( config ){
            tmpPanel.cfg.applyConfig( config, true );
        }
        // register with overlay manager
        YG.overlayManager.register([tmpPanel]);
        // force content if there is none
        if( !Boolean( tmpPanel.header )) {
            tmpPanel.setHeader( tmpPanel.id + " header " );
        };
        if( !Boolean( tmpPanel.body )) {
            tmpPanel.setBody( tmpPanel.id + " body" );
        };
        if( !Boolean( tmpPanel.footer )) {
            tmpPanel.setFooter( tmpPanel.id );
        };
        // render the panel
        tmpPanel.render( document.getElementById('idBodyWrapper') );
        // add tooltip
        tmpPanel._tt_ = new YAHOO.widget.Tooltip(name+'_tt', { 
            context: name+'_h', 
            zindex: 999,
            text:"todo: tooltip text goes here" 
        });
        return tmpPanel;
    };
    YG.PanelResize = function( panel ){
        // Hold the resizeConfig in a local var since Resize dies otherwise!
        // Not sure why but it seems likely that YUI resize stores instance 
        // values in the config and this causes problems.
        var resizeConfig = {
            handles: ['br', 'tr'],
            autoRatio: false,
            minWidth: 200,
            minHeight: 100,
            status: false,
            proxy: true
        };
        var _resize = new YAHOO.util.Resize( panel.id, resizeConfig );
        panel._resize = _resize;
        // Setup startResize handler, to constrain the resize width/height
        // if the constraintoviewport configuration property is enabled.
        _resize.on("startResize", function(args) {
            if (panel.cfg.getProperty("constraintoviewport")) {
                var D = YAHOO.util.Dom;
                var clientRegion = D.getClientRegion();
                var elRegion = D.getRegion(this.element);
                _resize.set("maxWidth", 
                    clientRegion.right - elRegion.left - 
                    YAHOO.widget.Overlay.VIEWPORT_OFFSET);
                _resize.set("maxHeight", 
                    clientRegion.bottom - elRegion.top - 
                    YAHOO.widget.Overlay.VIEWPORT_OFFSET);
            } else {
                _resize.set("maxWidth", null);
                _resize.set("maxHeight", null);
            };
        }, panel, true);
        // Setup resize handler to update the Panel's 'height' to cause body to 
        // fill the new height.
        _resize.on("resize", function(args) {
            var panelHeight = args.height;
            var panelWidth = args.width;
            //YAHOO.log('in _resize.on', 'dbg', 'dbg');
            if (panelHeight != 0) {
                this.cfg.setProperty("height", panelHeight + "px");
                }
            if (panelWidth != 0 ) {
                this.cfg.setProperty("width", panelWidth + "px");
                }
            if( panel._map ){       // this is a map panel
                panel._map.checkResize();
            };
        }, panel, true);
        return panel;
    };
    YG.PanelsShow = function(){
        if( YG.PanelsShow._show ){
            YG.overlayManager.hideAll();
            YG.MenuTop();
            YG.PanelsShow._show = false;
        } else {
            YG.overlayManager.showAll();
            YG.PanelsShow._show = true;
        };
    };
    YG.PanelsShow._show = true;
    YG.PanelDblClick = function( ){
        alert('hi');
    }
    YG.PanelTop = function( ){
        this.show();
        this.focus();
    };
    YG.PanelCreate = function( name ){
        // make a panel
        var tmp = YG.PanelResize( YG.Panel( name,  YG.PanelLayout.wiki.config ));
        var hdr = "";
        hdr += name + ' ';
        hdr += '<div style="position: absolute; top: 3px; right: 30px; ">';
        hdr += '<a href="#" onclick="YG.PanelDestroy( \'' + name + '\' ); return false;" >';
        hdr += '<img src="static/img/close.png" border="0" >';
        hdr += '</a>';
        hdr += '</div>';
        tmp.setHeader( hdr );
        return tmp;
    };
    YG.PanelDestroy = function( name ){
        YAHOO.log('Close<' + name + '>', 'dbg', 'YG');
        // add remove elements http://www.dustindiaz.com/add-remove-elements-reprise/
        // close the tool tip
        var oTT = YG.overlayManager.find( name );  // todo: error check
        oTT._tt_.hide();
        // validate the close
        var c = window.confirm("Click OK to delete this panel.");
        if( c ){
            // remove the panel from the overlay manager
            YG.overlayManager.remove( name );
            // remove the panel from the DOM
            var el = document.getElementById( name + '_c' );
            el.parentNode.removeChild( el );
        };
    };
</script>
<!--Logger-->
<script type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////
    //
    // Logger methods
    //
    ////////////////////////////////////////////////////////////////////////////
    YG.LogShow = function(){ 
        if( YG.LogShow._show ){
            YG._logReader.hide();
            YG.LogShow._show = false;
        } else {
            YG._logReader.show();
            YG.LogShow._show = true;
        };
    };
    YG.LogInit = function(){
        YG._logReader = new YAHOO.widget.LogReader(null, 
            {width: '450px', verboseOutput: false});
        YG._logReader.hide();       // initially hidden<script type="text/javascript" >
    };
    YG.LogShow._show = false;
</script>
<!--Panel layouts-->
<script type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////
    //
    // Holds the default panel configuration in a convenient form
    //
    ////////////////////////////////////////////////////////////////////////////
    YG.PanelLayoutFix = function( config ){
        var pc = {};
        for( var x in config ){
            pc[x] = config[x];
        };
        pc.width = pc.width + 'px';
        pc.height = pc.height + 'px';
        return pc;
    };
    YG.PanelLayoutTOP = 115;
    YG.PanelLayoutHEIGHT = 600;
    YG.PanelLayout = {
        left: 5,
        gutter: 5,
        top: YG.PanelLayoutTOP,
        height: 700,
        filter: { x: 0, y: YG.PanelLayoutTOP, width: 200, height: YG.PanelLayoutHEIGHT, visible: true, close: true },
        list: { x: 0, y: YG.PanelLayoutTOP, width: 500, height: YG.PanelLayoutHEIGHT, visible: true, close: true },
        map: { x: 0, y: YG.PanelLayoutTOP, width: 600, height: YG.PanelLayoutHEIGHT, visible: true, close: true },
        user: { x: 250, y: YG.PanelLayoutTOP + 50 , width: 400, height: YG.PanelLayoutHEIGHT, visible: false, close: true },
        wiki: { x: 250, y: YG.PanelLayoutTOP + 50, width: 500, height: YG.PanelLayoutHEIGHT, visible: true, close: true }
    };
    var p = YG.PanelLayout;
    p.filter.x = p.left;
    p.filter.config = YG.PanelLayoutFix( p.filter );
    p.list.x = p.filter.x + p.filter.width + p.gutter;
    p.list.config = YG.PanelLayoutFix( p.list );
    p.map.x = p.list.x + p.list.width + p.gutter;
    p.map.config = YG.PanelLayoutFix( p.map );
    p.user.config = YG.PanelLayoutFix( p.user );
    p.wiki.config = YG.PanelLayoutFix( p.wiki );
</script>
<!--Initialization-->
<script type="text/javascript">
    ////////////////////////////////////////////////////////////////////////////
    //
    // Initialization methods
    //
    ////////////////////////////////////////////////////////////////////////////
    YG.MenuInit = function(){
        YAHOO.log('init idMenu', 'info', 'YG');
        YG.MenuPanel = YG.Panel( 'idMenu', 
            {xy:[90,5],
            visible: true,
            close: false,
            constraintoviewport:true,
            width: '345px',
            height: '95px'}
        );
        YAHOO.util.Event.addListener("idFilterBTN", "click", YG.PanelTop, YG.FilterPanel, true);
        YAHOO.util.Event.addListener("idListBTN", "click", YG.PanelTop, YG.ListPanel, true);
        YAHOO.util.Event.addListener("idMapBTN", "click", YG.PanelTop, YG.MapPanel, true);
        YAHOO.util.Event.addListener("idUserBTN", "click", YG.PanelTop, YG.UserPanel, true);
        YAHOO.util.Event.addListener("idShowAllBTN", "click", YG.PanelsShow, {}, false);
        YAHOO.util.Event.addListener("idLogShowBTN", "click", YG.LogShow, {}, false);
        YAHOO.util.Event.addListener("idLogo", "click", YG.MenuTop, {}, false);
    };
    YG.MenuTop = function(){
        YG.MenuPanel.show();
        YG.MenuPanel.focus();
    };
    YG.FilterInit = function(){
        // create panel and make resizable
        YG.FilterPanel = YG.Panel( 'idFilter', YG.PanelLayout.filter.config );
        YG.PanelResize( YG.FilterPanel );
        // catch blur event
        YG.FilterPanel.blurEvent.subscribe( 
            function(args){
                YAHOO.log('filter panel blur event');
            });
        //
        YAHOO.log('FilterInit get filter categories', 'info', 'YG');
        YAHOO.log('FilterInit populate panel', 'info', 'YG');
        YAHOO.log('FilterInit make visible', 'info', 'YG');
    };
    YG.ListInit = function(){
        YG.ListPanel = YG.Panel( 'idList', YG.PanelLayout.list.config );
        YG.PanelResize( YG.ListPanel );
        YAHOO.log('ListInit get list', 'info', 'YG');
        YAHOO.log('ListInit populate panel', 'info', 'YG');
        YAHOO.log('ListInit make visible', 'info', 'YG');
    };
    YG.MapInit = function(){
        YG.MapPanel = YG.Panel( 'idMap', YG.PanelLayout.map.config);
        // put our map in the panel
        if (GBrowserIsCompatible()) {
            YG.MapPanel._map = new GMap2(document.getElementById("idMapBD"));
            YG.MapPanel._map.addMapType(G_PHYSICAL_MAP);
            YG.MapPanel._map.setCenter(new GLatLng(37.0, -85.0), 5, G_PHYSICAL_MAP);
            YG.MapPanel._map.addControl(new GLargeMapControl());
            YG.MapPanel._map.addControl(new GMapTypeControl());
            YG.MapPanel._map.addControl(new GScaleControl());
            YG.MapPanel._map.addControl(new GOverviewMapControl ());
            YG.MapPanel._map.enableGoogleBar();
        }
        YG.PanelResize( YG.MapPanel );
        YAHOO.log('MapInit populate panel', 'info', 'YG');
        YAHOO.log('MapInit make visible', 'info', 'YG');
    };
    YG.UserInit = function(){
        YG.UserPanel = YG.Panel( 'idUser', YG.PanelLayout.user.config );
        YG.PanelResize( YG.UserPanel );
        YAHOO.log('UserInit get user list', 'info', 'YG');
        YAHOO.log('UserInit populate panel', 'info', 'YG');
        YAHOO.log('UserInit make visible', 'info', 'YG');
    };
    YG.Init = function(){
        YG.LogInit();
        YG.FilterInit();
        YG.ListInit();
        YG.MapInit();
        YG.UserInit();
        YG.WikiView( 'SiteHome' );
        YG.MenuInit();          // do last so can connect menu buttons
        YG.MenuTop();
    };

    YAHOO.util.Event.onDOMReady(YG.Init);
</script>
<!--Wiki View-->
<script type="text/javascript">
    YG.WikiView = function (wikipage) {
        var panel = YG.PanelCreate( wikipage );
        // get the page
        var oCallback = {
            success:YG.WikiView.HandleSuccess,
            failure:YG.WikiView.HandleFailure,
            argument: { panel: panel, wikipage: wikipage }
        };
        var request = YAHOO.util.Connect.asyncRequest( 'GET', "wikiget/" + wikipage, oCallback );
        YAHOO.log("Initiating request; tId: " + request.tId, "dbg", "YG");
    };
    YG.WikiView.HandleSuccess = function( args ){
        YAHOO.log("The success handler was called.  tId: " + args.tId, "dbg", "YG");
        if( args.responseText !== undefined ){
            var out = '';
            out += '<ul>';
            out += "<li>Transaction id: " + args.tId + "</li>";
            out += "<li>HTTP status: " + args.status + "</li>";
            out += "<li>Status code message: " + args.statusText + "</li>";
            out += "<li>HTTP headers: <ul>" + args.getAllResponseHeaders + "</ul></li>";
            out += "<li>Server response: " + args.responseText + "</li>";
            out += '</ul>';
            args.argument.panel.setBody( out );
        };
    };
    YG.WikiView.HandleFailure = function( args ){
        YAHOO.log("The failure handler was called.  tId: " + args.tId, "dbg", "YG");
        if( args.responseText !== undefined ){
            var out='';
            out += "<ul>";
            out += "<li>Transaction id: " + args.tId + "</li>";
            out += "<li>HTTP status: " + args.status + "</li>";
            out += "<li>Status code message: " + args.statusText + "</li>";
            out += "</ul>";
            args.argument.panel.setBody( out );
        };
    };
</script>
</head>

<body class=" yui-skin-sam">

<!-- idBodyWrapper -->
<div id="idBodyWrapper" style="width: 100%; height: 90px; background:transparent url(/static/img/headergrad2.png) repeat scroll 0 0;" > 

<!-- idLogoWrapper -->
<div id="idLogoWrapper" style="height: 84px; width: 84px; 
    position: fixed; top: 5px; left: 5px;
    z-index: 9999;
    " > 
    <div><a href="/"><img id='idLogo' src='static/img/wikilogo.png' style="border-style: none" /></a></div>
</div> 
<!-- idLogoWrapper -->

<div id="idMenu" style="visibility:hidden" >
    <div class="hd" style="text-align: left;">
        Main menu 
        <span id="idMenu_hd_2" style="font-size: 0.8em;" > Logged on as: someone@somewhere.com</span>
    </div>
    <div class="bd" >
        <div style="position: relative; top: -.6em; border-style: none;">
            <a href="/wikiview/SiteHome" ><img src="/static/img/wikihome.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idFilterBTN" href="#" ><img src="/static/img/wikifilter.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idListBTN" href="#" ><img src="/static/img/wikilist.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idMapBTN" href="#" ><img src="/static/img/wikimap.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idUserBTN" href="#" ><img src="/static/img/wikiusers.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idLoginBTN" href="#" ><img src="/static/img/wikilogin.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idLogoutBTN" href="#" ><img src="/static/img/wikilogout.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idShowAllBTN" href="#" ><img src="/static/img/panelview.png" style="border-style: none; verticle-align: middle;" /></a>
            <a id="idLogShowBTN" href="#" ><img src="/static/img/logview.png" style="border-style: none; verticle-align: middle;" /></a>
        </div>
    </div>
    <div id="idMenu_ft" class="ft">
        <span id="idMenu_hd_1" style="font-size: .8em; font-weight: normal; color:lightskyblue; " > 
            ©2008 Richard J Bell ...All rights reserved
        </span>
    </div>
</div>
<div id="idFilter" style="visibility:hidden" >
    <div class="hd">Filter</div>
    <div class="bd" style="overflow: auto">Filter categories go here.</div>
    <div class="ft">Filter</div>
</div>
<div id="idList" style="visibility:hidden" >
    <div class="hd">List</div>
    <div class="bd" style="overflow: auto">List body</div>
    <div class="ft">List</div>
</div>
<div id="idMap" style="visibility:hidden" >
    <div class="hd">Map</div>
    <div id="idMapBD" class="bd" style="overflow: auto">Map body
    </div>
    <div class="ft">Map</div>
</div>
<div id="idUser" style="visibility:hidden" >
    <div class="hd">User</div>
    <div class="bd" style="overflow: auto">User body</div>
    <div class="ft">User</div>
</div>

</div> <!-- idBodyWrapper -->
</body>
</html>
